/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-13 16:51:03
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-13 18:28:28
 */
import { formatDate } from '@/utils'
import { useAntdTable } from 'ahooks'
import { Button, Form, Input, Modal, Space, Table } from 'antd'
import { useForm } from 'antd/es/form/Form'
import api from '@/api/roleApi'
import { Role } from '@/types/api'
import CreateRole from './CreateRole'
import { useRef } from 'react'
import { IAction } from '@/types/modal'
import { ColumnsType } from 'antd/es/table'
import { message } from '@/utils/AntdGlobal'
import SetPermission from './SetPermission'
export default function RoleList() {
  const [form] = useForm()
  const RoleRef = useRef<{
    open: (type: IAction, data?: Role.RoleItem) => void
  }>()
  const permissionRef = useRef<{
    open: (type: IAction, data?: Role.RoleItem) => void
  }>()
  const getTableData = ({ current, pageSize }: { current: number; pageSize: number }, formData: Role.Params) => {
    return api
      .getRoleList({
        ...formData,
        pageNum: current,
        pageSize,
      })
      .then((data) => {
        return {
          total: data.page.total,
          list: data.list,
        }
      })
  }
  const { tableProps, search } = useAntdTable(getTableData, {
    form, //参数的表单值传禁区
  })
  //新增角色
  const handleCreate = () => {
    RoleRef.current?.open('create')
  }
  //编辑角色
  const handleEdit = (data: Role.RoleItem) => {
    RoleRef.current?.open('edit', data)
  }
  //删除角色
  const handleDelete = (_id: string) => {
    Modal.confirm({
      title: '确认删除',
      content: <span>是否删除该角色</span>,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        await api.delRole({ _id })
        message.success('删除成功')
        search.submit()
      },
    })
  }
  //设置权限
  const handleSetPermission = (record: Role.RoleItem) => {
    permissionRef.current?.open('edit', record)
  }
  type DataType = Role.RoleItem
  const columns: ColumnsType<DataType> = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render(updateTime: string) {
        return formatDate(updateTime)
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render(createTime: string) {
        return formatDate(createTime)
      },
    },
    {
      title: '操作',
      key: 'action',
      render(record: Role.RoleItem) {
        return (
          <Space>
            <Button onClick={() => handleEdit(record)} type='text'>
              编辑
            </Button>
            <Button type='text' onClick={() => handleSetPermission(record)}>
              设置权限
            </Button>
            <Button type='text' danger onClick={() => handleDelete(record._id)}>
              删除
            </Button>
          </Space>
        )
      },
    },
  ]
  return (
    <div className='role-wrapper'>
      <Form form={form} className='search-form' layout='inline' labelCol={{ span: 4 }}>
        <Form.Item name='roleName' label='角色名称'>
          <Input placeholder='输入角色名称' />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary' onClick={search.submit}>
              搜索
            </Button>
            <Button type='default' onClick={search.reset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>用户列表</div>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
          </div>
        </div>
      </div>
      <Table bordered {...tableProps} rowKey='_id' columns={columns} />
      {/* 创建角色组件弹窗 */}
      <CreateRole mRef={RoleRef} update={search.submit} />
      {/* 设置权限 */}
      <SetPermission mRef={permissionRef} update={search.submit} />
    </div>
  )
}
